
<% 
  use pgml_components::Component;
  use crate::components::sections::Split;
  use crate::components::PostgresLogo;

  let eyebrow_formatted = r#"<span class="text-white-300 text-uppercase">Apply now</span>"#;

  let path = format!("/careers/apply/{}",job_title.replace(" ", "-").to_lowercase());

  let form = format!(r#"
    <form action="{}" method="post" enctype="multipart/form-data">
      <div class="d-flex flex-column justify-content-center align-items-center gap-4">

        <div class="d-flex justify-content-center">
          {}
        </div>

        <div class="w-100 d-flex justify-content-start">
          <button class="btn btn-tertiary ps-0" onclick="history.back()">
            <span class="material-symbols-outlined icon-back-btn" style="font-size: 22px">
              arrow_back
            </span>
            Back
          </button>
        </div>

        <div class="d-flex flex-column gap-3">
          <div class="mb-3">
            <label class="form-label">Full Name</label>
            <input class="form-control" type="text" name="name" placeholder="Owl Hootington" size="42" required>
          </div>

          <div class="mb-3">
            <label class="form-label">Email</label>
            <input class="form-control" type="email" name="email" placeholder="example@email.com" size="42" required>
          </div>

          <div class="mb-3">
            <label class="form-label">Phone Number</label>
            <input class="form-control" type="tel" name="phone" placeholder="(415)123-4567" size="42">
          </div>

          <div class="mb-3">
            <label class="form-label">LinkedIn URL</label>
            <input class="form-control" type="text" name="linkedin" placeholder="PostgresML" size="42">
          </div>

          <div class="mb-3 w-100">
            <label class="form-label">Resume <span class="legal-text text-white-300">(.pdf)</span></label>
            <input class="form-control" type="file" name="resume" accept=".pdf" required="true" placeholder=".pdf">
          </div>

          <div class="mb-3">
            <label class="form-label">Github/Portfolio URL</label>
            <input class="form-control" type="text" name="portfolio" placeholder="mywebsite.com" size="42">
          </div>

          <div class="mb-3 w-100">
            <label class="form-label">Note</label>
            <textarea class="form-control" name="note" maxlength="1000" aria-label="With textarea" placeholder="Tell us about yourself"></textarea>
          </div>

          <input type="hidden" name="position" value="{}">

          <button class="btn btn-primary-web-app" type="submit">Apply</button>
        </div>
      </div>
    </form>
  "#,
  path,
  PostgresLogo::new("/").bigger().render_once().unwrap(),
  job_title
  );
  
  let success_message = format!(r#"
  <div class="d-flex flex-column gap-2 p-2">
    <p class="text-center">You have successfully applied for the <span class="text-capitalize">{}</span> role! We’ll be in contact with you shortly. </p>
    <a class="btn btn-primary-web-app mx-auto" href="/careers" data-turbo-frame="_top">Careers</a>
  </div>
  "#, job_title);

  let failure_message = format!(r#"
  <div class="d-flex flex-column gap-2 p-2">
    <p class="text-center">Something went wrong!</p>
    <a class="btn btn-primary-web-app mx-auto" href="/careers" data-turbo-frame="_top">Careers</a>
  </div>
  "#);

  let display_area = format!(r#"
  <div class="card border-1">
    <div class="card-body">
      <turbo-frame id="career-display-area">
      {}
      </turbo-frame>
    </div>
  </div>
  "#,
  match success {
    Some(true) => &success_message,
    Some(false) => &failure_message,
    None => &form
  });
%>

<%+ 
  Split::new()
    .greeting(Component::from(eyebrow_formatted), Component::from(job_title))
    .display_area(Component::from(display_area))
    .with_navbar()
%>
